import maxSocImg from '@/assets/img/ico_battery_realtime.png';
import maxCurrentImg from '@/assets/img/ico_current_realtime.png';
import maxTemptImg from '@/assets/img/ico_temperature_realtime.png';
import maxVolImg from '@/assets/img/ico_volt_realtime.png';
import Style from '../../components/batteryIndex.less';
//顶部soc 实时功率等信息
import { InfoBlock } from '../State/StateBlock';
import { InfoField } from '../State/StateInfoField';
//电量统计信息
import { ChargeBlock } from '../Charge/Block';
//离线相应信息
import { OfflienBlock } from '../Offline/Block';
import OffLineChart from '../Offline/offlineChart';
//极值概况信息
import { EtremeBlock } from '../Extreme/ExtremeBlock';
import { EtremeInfoField } from '../Extreme/ExtremeInfoField';
//极值详情
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { useSelectedDeviceNode } from '../../SelectedDeviceNodeContext';
import { MaxOverview } from '../Profile/index';

interface itemPops {
  label?: string;
  value?: API.BoxOverViewDTO[keyof API.BoxOverViewDTO];
  imgSrc?: string;
  unit?: string;
}

interface IProps {
  data?: API.BoxRealtimeDTO;
  Items: itemPops[];
  chargeData?: API.BoxOverViewDTO;
}

const Index: React.FC<IProps> = ({ data, Items, chargeData }) => {
  const intl = useIntl();
  const deviceNode = useSelectedDeviceNode();
  const type = deviceNode?.deviceType;
  const [hiddenItems, sethiddenItems] = useState<string[]>([]); // State to track the selected tab
  useEffect(() => {
    if (type === 'CLUSTER') {
      sethiddenItems(['soc', 'current']);
    }
  }, [type]);
  return (
    <div>
      <InfoBlock>
        {Items.map((item, index) => (
          <InfoField key={index} InforData={item} />
        ))}
      </InfoBlock>
      <div className={Style['electricity']}>
        <div className={Style['electricity-left']}>
          <ChargeBlock
            chargeData={{
              data: chargeData,
              title: intl.formatMessage({ id: 'stationRealtimeMonitoring.PowerStatistics' }),
            }}
          />
        </div>
        <div className={Style['electricity-right']}>
          <OfflienBlock
            title={intl.formatMessage({ id: 'stationRealtimeMonitoring.OfflineDistribution' })}
          >
            <OffLineChart
              chartData={{
                boxOfflineCount: data?.offlineStatisticsDto?.boxOfflineCount,
                bmsOfflineCount: data?.offlineStatisticsDto?.bmsOfflineCount,
                clusterOfflineCount: data?.offlineStatisticsDto?.clusterOfflineCount,
                bmuOfflineCount: data?.offlineStatisticsDto?.bmuOfflineCount,
                unitOfflineCount: data?.offlineStatisticsDto?.unitOfflineCount,
              }}
            ></OffLineChart>
          </OfflienBlock>
        </div>
      </div>
      <EtremeBlock>
        <EtremeInfoField
          EtremeData={{
            max: data?.extreme?.tempExtreme?.max,
            maxLocation: data?.extreme?.tempExtreme?.maxLocation,
            min: data?.extreme?.tempExtreme?.min,
            minLocation: data?.extreme?.tempExtreme?.minLocation,
            imgsrc: maxTemptImg,
            category: 'tempt',
            maxDeviceCode: data?.extreme?.tempExtreme?.maxDeviceCode,
            minDeviceCode: data?.extreme?.tempExtreme?.minDeviceCode,
          }}
        />
        {hiddenItems.includes('soc') ? null : (
          <EtremeInfoField
            EtremeData={{
              max: data?.extreme?.socExtreme?.max,
              maxLocation: data?.extreme?.socExtreme?.maxLocation,
              min: data?.extreme?.socExtreme?.min,
              minLocation: data?.extreme?.socExtreme?.minLocation,
              imgsrc: maxSocImg,
              category: 'soc',
              maxDeviceCode: data?.extreme?.socExtreme?.maxDeviceCode,
              minDeviceCode: data?.extreme?.socExtreme?.minDeviceCode,
            }}
          />
        )}
        <EtremeInfoField
          EtremeData={{
            max: data?.extreme?.voltageExtreme?.max,
            maxLocation: data?.extreme?.voltageExtreme?.maxLocation,
            min: data?.extreme?.voltageExtreme?.min,
            minLocation: data?.extreme?.voltageExtreme?.minLocation,
            imgsrc: maxVolImg,
            category: 'vol',
            maxDeviceCode: data?.extreme?.voltageExtreme?.maxDeviceCode,
            minDeviceCode: data?.extreme?.voltageExtreme?.minDeviceCode,
          }}
        />

        {!hiddenItems.includes('current') ? (
          <EtremeInfoField
            EtremeData={{
              max: data?.extreme?.currentExtreme?.max,
              maxLocation: data?.extreme?.currentExtreme?.maxLocation,
              min: data?.extreme?.currentExtreme?.min,
              minLocation: data?.extreme?.currentExtreme?.minLocation,
              imgsrc: maxCurrentImg,
              category: 'current',
              maxDeviceCode: data?.extreme?.currentExtreme?.maxDeviceCode,
              minDeviceCode: data?.extreme?.currentExtreme?.minDeviceCode,
            }}
          />
        ) : null}
      </EtremeBlock>
      <MaxOverview
        maxData={{
          tempList: data?.extreme?.tempList,
          voltageList: data?.extreme?.voltageList,
          currentList: data?.extreme?.currentList,
          socList: data?.extreme?.socList,
        }}
        hiddenItems={hiddenItems}
      />
    </div>
  );
};

export default Index;
